<template>
    <div>
        <nav-header><template v-slot:title>订单确认</template></nav-header>


        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <div class="container-fluid">
                <div class="row" style="padding-bottom: 10px">
                    <div class="col-xs-6" style="text-align: center;"><img style="width: 100%;" :src="collectionData.img" /></div>
                    <div class="col-xs-6" style="text-align: right;font-size: 16px;font-weight: bold">
                        <p style="font-weight: bold;font-size: 16px;">{{collectionData.name}}</p>
                        <p><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{collectionData.price}}</span></p>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <div class="container-fluid">
                <div class="row" style="padding-bottom: 10px">
                    <div class="col-xs-6" style="text-align: left;font-size: 16px;font-weight: bold">卖家昵称:</div>
                    <div class="col-xs-6" style="text-align: right;font-size: 16px;font-weight: bold">{{collectionData.agent_name}}</div>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="text-align: left;font-size: 16px;font-weight: bold">卖家电话:</div>
                    <div class="col-xs-6" style="text-align: right;font-size: 16px;font-weight: bold">{{collectionData.agent_contract}}</div>
                </div>
            </div>
        </div>

        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <div class="container-fluid">
                <div class="row" style="padding-bottom: 10px">
                    <div class="col-xs-6" style="text-align: left;font-size: 16px;font-weight: bold">订单小计:</div>
                    <div class="col-xs-6" style="text-align: right"><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{collectionData.price}}</span></div>
                </div>
            </div>
        </div>

        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <div class="container-fluid">
                <div style="color: red;padding: 10px">
                    <p style="font-weight: bold;">公告</p>
                    <p>
                        进行了全面的测试。使用一块经过精雕细琢的木板，它与电影中的浮板材料相同，大小一样。由于参加实验的饰演者比原演员要重，所以把浮板的浮力加大百分之十一，调整到理想状态，并制成Rose在电影中穿的相同材料和浮力的救生衣。这时Jack多次尝试爬上并稳定木板，但都失败了。最后他们把救生衣绑在了木板的下面，两人再次爬上木板，庆幸的是他们不再挣扎，并且很稳当，坚持到了63分钟。
                    </p>
                </div>
            </div>
        </div>

        <div style="padding: 0 10px;margin-top: 40px">
            <button class="confirm-payment" @click="postOrder">提交订单</button>
        </div>

    </div>


</template>
<script>
    import NavHeader from "../Layout/NavHeader";
    import swal from "sweetalert";
    export default {
        components: {NavHeader},
        data() {
            return {
                venue_id: '',
                collection_id: '',
                order_no: '',

                collectionData: {
                    id: 0,
                    collection_image: '',
                    collection_name: '',
                    order_price: 0.00,
                    status: 0,
                    agent_name: '',
                    agent_contract: '',
                    content: '',
                },
            }
        },
        created() {
        },
        mounted() {
            let params = this.$route.params.vcid.split(',');
            this.venue_id = params[0];
            this.collection_id = params[1];
            this.getCollectionDetail();
            // this.order_no = this.$route.params.order_no;
            // this.getOrderDetail();
        },
        methods: {
            getOrderDetail() {
                let that = this;
                this.api.getOrderDetail(this.order_no).then(res => {
                    if (res.data) {
                        that.collectionData = res.data.order;
                    }
                })
            },
            getCollectionDetail() {
                let that = this;
                this.api.getCollectionDetail(this.collection_id).then(res => {
                    if (res.data) {
                        that.collectionData = res.data;
                    }
                })
            },
            postOrder() {
                this.api.postOrder(this.venue_id, this.collection_id).then(res => {
                    if (res.meta.code != '000') {
                        swal(res.meta.msg);
                        return;
                    }
                    window.location.href = '/order-detail/' + res.data.order_no
                });
            },
            orderDetail() {
                window.location.href = '/order-detail/' + this.order_no;
            }
        },
    }
</script>
<style scoped>

    .confirm-payment {
        width: 100%;
        line-height: 50px;
        background-color: rgb(214, 111, 84);
        color: #FAFAFA;
        border: none;
        text-align: center;
        border-radius: 25px;
    }
</style>
